vue 预览 docx,xlsx文件好用的插件

2023-12-04 15:47| 来源: 网络整理| 查看: 265

github地址：501351981.github.io/vue-office/ #docx文档预览组件 npm install @vue-office/docx vue-demi #excel文档预览组件 npm install @vue-office/excel vue-demi #pdf文档预览组件 npm install @vue-office/pdf vue-demi

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api/ .docx文件预览

使用网络地址预览

//引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx' //引入相关样式 import '@vue-office/docx/lib/index.css' export default { components:{ VueOfficeDocx }, data(){ return { docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址 } }, methods:{ rendered(){ console.log("渲染完成") } } }

上传文件预览

读取文件的ArrayBuffer

import VueOfficeDocx from '@vue-office/docx' import '@vue-office/docx/lib/index.css' export default { components: { VueOfficeDocx }, data(){ return { src: '' } }, methods:{ changeHandle(event){ let file = event.target.files[0] let fileReader = new FileReader() fileReader.readAsArrayBuffer(file) fileReader.onload = () => { this.src = fileReader.result } } } } excel文件预览

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

//引入VueOfficeExcel组件 import VueOfficeExcel from '@vue-office/excel' //引入相关样式 import '@vue-office/excel/lib/index.css' export default { components: { VueOfficeExcel }, data() { return { excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } } pdf文件预览

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

//引入VueOfficePdf组件 import VueOfficePdf from '@vue-office/pdf' export default { components: { VueOfficePdf }, data() { return { pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } }

【本文地址】

公司简介

联系我们